
<template>
  <el-select 
     ref="selectRef"
  v-model="selectValue" 
  :multiple='multiple' 
  :placeholder="placeholder" 
  :style="{width:width}" 
  clearable
   :filterable="filterable"
   :remote="remote"
   popper-class="select_box"
  >
  <template #suffix>
      <div class="custom-arrow-icon"></div>
    </template>
     <el-option
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
     >
     </el-option>
   </el-select>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'MSelect',
  })
  </script>
  <script setup  lang="ts">
  import { defineModel, defineProps} from 'vue'
 interface Data{
   label:string,
   value:number
 }
 const selectValue:any = defineModel("value")
 defineProps({
   options:{
     type:Array<Data>,
     default:()=>[]
   },
   placeholder:{
     type:String,
     default:""
   },
   width:{
     type:String,
     default:""
   },
   multiple:{
     type:Boolean,
     default:false
   },
   filterable:{
     type:Boolean,
     default:false
    },
    remote:{
     type:Boolean,
     default:false
    }
 })
  </script>
  
<style  lang="scss" scoped>
@import '@/styles/select.scss';
.custom-arrow-icon {
  width: 16px;
  height: 16px;
  background: url("@/assets/imgs/home/triangle.png") center center no-repeat;
  background-size: contain;
}

// 隐藏原始下拉箭头
:deep(.el-input__suffix-inner .el-select__caret) {
  display: none !important;
}
 </style>
  
 